@import '~iview/src/styles/index.less';
@import './utils.less';
@import './menu.less';

@ui-disabled-color           : #7b8497;

@slider-disabled-color       : @ui-disabled-color;

// Base
@body-background        : @bg-body;
@component-background   : @bg-2;
@title-color            : @color-1;
@text-color             : @color-2;
@link-color             : @primary-color;
@btn-default-bg         : @bg-2;
@btn-default-border     : #3E3E3E;
@btn-disable-color      : @color-3;
@btn-disable-bg         : #3E3E3E;
@btn-primary-color      : @text-color;

// Border color
@border-color-base      : @bg-body;  // outside
@border-color-split     : #292929;  // inside
@border-width-base      : 1px;       // width of the border for a component
@border-style-base      : solid;     // style of a components border

// Background color
@table-thead-bg               : @bg-3;
@table-td-stripe-bg           : @bg-3;
@table-td-hover-bg            : @bg-3;
@table-td-highlight-bg        : @bg-3;

// Input
@input-color                 : @text-color;
@input-bg                    : @bg-3;
@input-border-color          : @input-bg;
@input-disabled-bg           : #3E3E3E;
@input-placeholder-color     : @btn-disable-color;
@input-hover-border-color    : @primary-color;
@input-focus-border-color    : @primary-color;

.@{input-prefix-cls} {
  &::selection {
    background-color: @primary-color;
  }

  &::-moz-selection {
    background-color: @primary-color;
  }

  &:focus {
    box-shadow: none;
    border-color: @primary-color;
  }

  &:hover {
    border-color: @primary-color;
  }
}

// Seletct
.@{select-prefix-cls} {
  &-selection {
    background-color: @input-bg;
    border-color: @bg-3;
  }
}
.@{select-prefix-cls}-item {
  &-selected ,&-selected:hover{
    color: @text-color;
  }
}

.@{table-prefix-cls} {
  background-color: @bg-2;
  &-wrapper{
    border: none;

    > .@{spin-prefix-cls}-fix {
      background-color: @bg-2;
      opacity: 0.9;
    }
  }
  &:before{
    display: none;
  }
  td {
    background-color: @bg-2;
  }
}
.@{drawer-prefix-cls} {
  &-content {
    background-color: @component-background;
  }
  &-mask {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.@{divider-prefix-cls} {
  background: #3E3E3E;
}

// Modal
.@{modal-prefix-cls} {
  &-header {
    border-bottom: 1px solid @bg-1;
    p,
    &-inner {
      color: @color-1;
    }
  }
  &-footer {
    border-top: 1px solid @bg-1;
  }
  &-content {
    background-color: @bg-2;
  }
  &-mask {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

// Poptip
@poptip-arrow-color: transparent;
.@{poptip-prefix-cls} {
  &-inner {
    background-color: @bg-3;
  }
  &-popper{
    &[x-placement^="top"] .@{poptip-arrow}:after {
      border-top-color: @bg-3;
    }
    &[x-placement^="right"] .@{poptip-arrow}:after {
      border-right-color: @bg-3;
    }
    &[x-placement^="bottom"] .@{poptip-arrow}:after {
      border-bottom-color: @bg-3;
    }
    &[x-placement^="left"] .@{poptip-arrow}:after {
      border-left-color: @bg-3;
    }
  }
}

// Dropdown
.@{select-dropdown-prefix-cls} {
  background-color: @bg-3;
}
.ivu-dropdown-item:hover {
  background: @bg-1 !important;
}

.ivu-btn-default:hover {
  background: @btn-default-bg;
}
.@{checkbox-prefix-cls}-inner {
  background-color: @bg-4;
  border-color: @color-6;

  .@{checkbox-prefix-cls}-checked &::after {
    border-width: 1px;
  }
}

.ivu-message-notice-content {
  background: @bg-3;
  .ivu-message-info {
    .ivu-icon {
      color: #2C8CF0;
    }
  }
}

/* #4 overwrite disabled color {{{ */
.disabled() {
  color: @ui-disabled-color;
}

/* #5 */
.@{select-prefix-cls} {
  &-input {
    &[disabled] {
      color: @ui-disabled-color;
    }
  }
}
/* }}} */

/* menu 内嵌入 badge */
.@{menu-prefix-cls} {
  &-item .@{css-prefix}icon {
    margin-right: 6px;
  }
  &-submenu-title .@{css-prefix}icon {
    margin-right: 8px;
  }
}


// avator size:xl, xxl
@avatar-bg: @primary-color;
.@{avatar-prefix-cls} {
  &-xl {
    .avatar-size(70px, 40px);
  }
  &-xxl {
    .avatar-size(100px, 60px);
  }
}

/* page 样式调整 */
.@{page-prefix-cls} {
  color: @color-2;
  font-size: 14px;
  font-weight: 400;

  .@{page-prefix-cls}-total {
  }

  .@{page-prefix-cls}-prev {
    border: 1px solid @color-4;
    background-color: @bg-2;
    font-size: 14px;
    color: @color-2;
  }

  .@{page-prefix-cls}-disabled {
    a {
      color: @color-4 !important;
    }
  }

  .@{page-prefix-cls}-item {
    border: 1px solid @color-4;
    background-color: @bg-2;
    font-size: 14px;
    color: @color-2;

    &:hover {
      border: 1px solid @primary-color;
    }
  }

  .@{page-prefix-cls}-item-active {
    border: 1px solid @primary-color;
  }

  .@{page-prefix-cls}-item-jump-prev {
    &:after {
      color: @color-4;
    }
  }

  .@{page-prefix-cls}-item-jump-next {
    &:after {
      color: @color-4;
    }
  }

  .@{page-prefix-cls}-next {
    border: 1px solid @color-4;
    background-color: @bg-2;

    a {
      font-size: 14px;
      color: @color-2;
    }
  }

  .@{page-prefix-cls}-options {
    .@{page-prefix-cls}-options-sizer {
      .@{select-prefix-cls} {
        .@{select-prefix-cls}-dropdown {
          background: @bg-2;
          border: 1px solid @bg-3;
        }

        .@{select-prefix-cls}-selection {
          background-color: @bg-2;
          border: 1px solid @color-4;

          &:hover {
            border: 1px solid @primary-color;
          }
        }
      }
    }

    .@{page-prefix-cls}-options-elevator {
    }
  }
}

/* table 样式调整 */
.@{table-prefix-cls} {
  &:after {
    background: @bg-2;
  }
}

/* radio 样式调整 */
.@{radio-prefix-cls} {
  &-wrapper {
    display: flex;
    align-items: center;
  }

  &-checked {
    .@{radio-prefix-cls}-inner {
      border-color: @primary-color !important;
    }
  }

  .@{radio-prefix-cls}-inner {
    background-color: @bg-2;
    border-color: @color-6;
  }
}
